<template>
    <view class="person-info-step-2">
        <div class="step-icon" style="margin-bottom: 16px;">
            <img src="https://hxs.dsjhs.com:553/prod-api/profile//step-2.png" alt="" srcset=""
                style="width: 358px;height: 21px;">
        </div>
        <view class="page flex-col">
            <text class="text_2">选择一张你最喜欢的照片当头像吧～</text>
            <!-- <view class="image-wrapper_1 flex-col" @click="selectAvatar">
                <img v-if="!avatarForm.userAvatar" class="avatar-img" src="https://hxs.dsjhs.com:553/prod-api/profile/up-icon.png" width="24px" height="24px" alt="" srcset="">
                <img v-else class="avatar-img-selected" :src="api_host + avatarForm.userAvatar" width="24px" height="24px" alt="" srcset="">
            </view> -->
            <button class="image-wrapper_1 flex-col" open-type="chooseAvatar" @chooseavatar="uploadAvatar">
                <image v-if="avatarForm.userAvatar" class="avatar-img-selected" :src="api_host + avatarForm.userAvatar"
                    mode=""></image>
                <img v-if="!avatarForm.userAvatar" class="avatar-img"
                    src="https://hxs.dsjhs.com:553/prod-api/profile/up-icon.png" width="24px" height="24px" alt=""
                    srcset="">
            </button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        step: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            avatarForm: {
                userAvatar: null
            },
        }
    },
    methods: {
        // selectAvatar() {
        //     // 模拟头像选择，实际项目中可以调用相册选择或其他选择方式
        //     uni.chooseImage({
        //         count: 1,
        //         sourceType: ['album', 'camera'],
        //         success: async (res) => {
        //             const res1 = await this.$utils.uploadFile(res.tempFilePaths[0])
        //             console.log(res1, 'resres')
        //             if (res1.code == 200) {
        //                 this.avatarForm.userAvatar = res1.fileName
        //             } else {
        //                 this.avatarForm.userAvatar = ''
        //             }
        //             uni.showToast({
        //                 title: '头像选择成功',
        //                 icon: 'success',
        //                 duration: 1500
        //             });
        //         },
        //         fail: (err) => {
        //             console.log('选择头像失败:', err);
        //         }
        //     });
        // },
        async uploadAvatar(e) {
            let {
                avatarUrl
            } = e.detail;
            const res = await this.$utils.uploadFile(avatarUrl)
            console.log(res, 'resss')
            if (res.code == 200) {
                this.avatarForm.userAvatar = res.fileName
            } else {
                this.avatarForm.userAvatar = ''
            }
        },
        handleNext() {
            this.$emit('update:step', 3)
        }
    }
}
</script>

<style lang="scss" scoped>
.person-info-step-2 {
    background-color: rgba(247, 246, 255, 1);
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;

    .group_1 {
        margin: 0 27px 0 43px;

        .text_1 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 17px;
            font-family: SFPro-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 22px;
        }

        .thumbnail_1 {
            width: 19px;
            height: 12px;
            margin: 5px 0 5px 182px;
        }

        .thumbnail_2 {
            width: 17px;
            height: 12px;
            margin: 5px 0 5px 8px;
        }

        .image_1 {
            width: 27px;
            height: 13px;
            margin: 5px 0 4px 7px;
        }
    }

    .image_2 {
        width: 384px;
        height: 46px;
        margin-top: 6px;
    }

    .image_3 {
        width: 358px;
        height: 20px;
        margin: 16px 10px 0 16px;
    }

    .text_2 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: right;
        white-space: nowrap;
        line-height: 25px;
        margin: 32px 45px 0 51px;
    }

    .image-wrapper_1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 50%;
        margin: 20px auto 0;
        overflow: hidden;

        &::after {
            border: 0;
        }

        .avatar-img {
            width: 24px;
            height: 24px;
        }

        .avatar-img-selected {
            width: 120px;
            height: 120px;
        }

        .label_1 {
            width: 24px;
            height: 24px;
        }
    }

    .selected-text {
        text-align: center;
        margin-top: 16px;
        color: rgba(49, 158, 255, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .group_2 {
        width: 100%;
        margin-top: 133px;
        padding: 0 10px 0 16px;
        box-sizing: border-box;

        .image-wrapper_2 {
            background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2bafea5034a738ef796282cc164250eb58dd5285c4bb3a763e0da148dc9d1efb) 100% no-repeat;
            background-size: 100% 100%;
            padding: 12px 21px 12px 21px;

            .label_2 {
                width: 24px;
                height: 24px;
            }
        }
    }
}
</style>